<template>
  <div class="login">
     <div class="container">
        <div class="headerImg">
            <img src="@/assets/headerpic.png" alt="">
        </div>
        <div class="form">
            <input type="text" placeholder="请输入您的手机号码" class="tel" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="tel"/>
            <input type="password" placeholder="请输入您的密码" class="tel" v-model="password">
            <button type='button' class="loginButton" @click="login">登录</button>
        </div>
        <div class="alink">
            <a href="./losePassword.html">忘记密码？</a>
            <a href="./register.html">新用户注册</a>
        </div>
        <transition name="fade">
            <div class="AlertBlock" id="AlertBlock" v-show="show"></div>
        </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      show: false,
      tel: "",
      password:""
    };
  },
  methods: {
    login: function() {
      if (this.tel == "") {
       this.showTips("请输入手机号码");
        return false;
      }
      if (this.password == "") {
       this.showTips("请输入密码");
        return false;
      }
    },
    //错误提示效果
    showTips:function(msg){
         this.show = true;
        document.querySelector("#AlertBlock").innerHTML = msg;
        setTimeout(() => {
          this.show = false;
        }, 1900);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@charset "UTF_8";
body {
  background: rgba(255, 255, 255, 1);
}

.headerImg {
  text-align: center;
  margin: 0.8rem 0;
}

.headerImg img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
}

.tel {
  display: block;
  width: 5rem;
  padding: 0.3rem;
  font-size: 0.34rem;
  border: none;
  border-bottom: 0.01rem solid #eee;
  margin: 0 auto;
}

.loginButton {
  display: block;
  border-radius: 0.362rem;
  width: 5rem;
  height: 0.724rem;
  border: none;
  background-color: rgba(0, 150, 136, 1);
  font-size: 0.3rem;
  color: #fff;
  margin: 1rem auto 0;
}

.alink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5rem;
  margin: 0.6rem auto 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
</style>
